﻿@using xConnected.Common.ExpertProfile
<div class="modal-middle hide fade" id="JobTypeProfileDialog" style="display: none;" >
    <div class="modal-header">
    </div>
    <div class="modal-body-higher">
        <div class="thumbnail"  style="margin-bottom: 10px">
            <div style="margin-left: 5px; margin-right: 5px; margin-bottom: 10px; margin-top: 10px">
                <div class="row-fluid">
                    <label class="span6" style="margin-left: 0px"><strong>@Resources.AddJobType</strong></label>
                </div>
                <div data-bind="visible: $root.profile.allJobTypesBtnVisible">
                    <ul class="unstyled" data-bind="foreach: $root.profile.excludedJobTypes">
                        <li class="row-fluid" data-bind="style: { marginBottom: $data.Value == 0 ? '10px' : '0px' }">
                            <a class="btn btn-small" href="#" data-bind="click: function(){ $root.profile.addJobType($data); },css: { 'btn btn-inverse': $data.Value == 0 }"><span data-bind="text: Description"></span> <i class="icon-plus" data-bind="css: { 'icon-plus icon-white': $data.Value == 0 }"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="thumbnail">
            <div style="margin-left: 5px; margin-right: 5px; margin-bottom: 10px; margin-top: 10px">
                <div class="row-fluid">
                    <label class="span6" style="margin-left: 0px"><strong>@Resources.SelectedJobTypes</strong></label>
                </div>
                <div>
                    <ul data-bind="foreach: $root.profile.jobTypes" class="unstyled">
                        <li class="row-fluid">
                            <a class="btn btn-small" href="#" data-bind="click: function(){ $root.profile.removeJobType($data); }"><span data-bind="text: Description"></span> <i class="icon-remove"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-small btn-info" data-bind="click: function() { $root.profile.okJobType();}"><strong>@Resources.Ok</strong></a>
        <a href="#" class="btn btn-small" data-bind="click: function() { $root.profile.cancelJobType();}"><strong>@Resources.Cancel</strong></a>
    </div>
</div>